<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />

    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem .5rem 0 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .shop-info {
            background: #F2F2F2;
            padding: .6rem
        }

        .pay-true {
            margin-top: 2rem;
            justify-content: flex-end
        }

        .pay-type-item {
            height: 3.8rem;
        }

        .pay-btn {
            width: 100%;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            margin-bottom: .35rem;
            border-radius: 1rem;
            margin-top: 5.25rem
        }

        .select-img {
            height: .65rem
        }

        .unselect-img {
            height: 0
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="dialog">
            <div class="modal-head">
                <div class="">
                    此商品需要您到提货点自提
                </div>
                <img class="close-modal-img" src="../../image/common/guanbi.png" alt="" tapmode onclick="api.closeFrame()">
            </div>
            <div class="modal-body">
                <div class="shop-info font-14 text-color-3">
                    <div class="flex">
                        <span>店铺名称:</span>
                        <div class="font-semibold">万嘉便利店</div>
                    </div>
                    <div class="">
                        <span>提货地址:</span>
                        <div class="font-semibold" style="display:inline">
                            福建省福州市鼓楼区快安路128号名城港湾B块5#楼1层09店面
                        </div>
                    </div>
                    <div class="pay-true flex">
                        <span>实际支付:</span>
                        <div class='red-text font-12'>¥<span class="font-17">88</span></div>
                    </div>
                </div>

                <div class="pay-type">
                    <div class="flex-justify-between pay-type-item" v-for='(item,index) in payItms' @click='selected(index)'>
                        <div class="flex-align-center">
                            <img class='img-44' :src="item.img" alt="">
                            <span class="font-16">{{item.text}}</span>
                        </div>
                        <img :class="[ payIndex == index ? 'select-img' : 'unselect-img' ]" src="../../image/common/xuanze.png" alt="" style="width: .85rem;">
                    </div>
                </div>

                <button class='pay-btn red-btn font-16' tapmode @click='payConfirm'>确认支付</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            payItms: [{
                text: '微信支付',
                img: '../../image/order/weixin.png'
            }, {
                text: '收益支付',
                img: '../../image/order/shouyi.png'
            }],
            payIndex: 0
        },
        methods: {
            selected: function(index) {
                this.payIndex = index
            },
            //提交订单,引入支付宝支付模块
            payConfirm: function() {
                var aliPayPlus = api.require('aliPayPlus');
                aliPayPlus.pay({
                    subject: '订单名',
                    body: '订单描述',
                    amount: '0.01',
                    tradeNO: '4563548735674',
                    rsa2: true
                }, function(ret, err) {
                    api.alert({
                        title: '支付结果',
                        msg: JSON.stringify(ret),
                        buttons: ['确定']
                    });
                });

            }
        }

    });
    $api.addCls(dialog, 'in');
    apiready = function() {
        // $(document.body).on('touchend', function(e) {
        //     var dialog = $("#dialog")[0];
        //     if (!$.contains(dialog, e.target)) {
        //         $('#dialog').removeClass('in');
        //         setTimeout(function() {
        //             api.closeFrame();
        //         }, 200);
        //     }
        // });
    };
</script>


</html>
